<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box2 {
            width: 50px;
            height: 50px;
            background-color: aqua;
            cursor: pointer;
            text-align: center;
            line-height: 50px;
        }
        .color_set {
            color: brown;
        }
    </style>
</head>
<body>
    <script src="../vue@2.6.14.min.js"></script>
    <div id="app">
        <h3>demo1: 属性不做动态绑定时，就是一个固定值</h3>
        <a href="https://www.baidu.com/" target="_blank">点击跳转到搜索页面</a>

        <h3>demo2: 属性做动态绑定，把值先设定为一个变量，当变量的值发生变化时，属性就变更到最新的属性值。</h3>
        <a :href="url" target="_blank">点击跳转到新连接</a>

        <h3>demo3: 绑定类名</h3>
        <p>情形一：以对象的形式，如果isBox1为true，则类名中会增加box1，<br>
        如果isBox1为false，则类名中会移除box1。 box2同理。</p>
        <div :class="{box1: isBox1, box2: isBox2}">
            注意观察盒子样式
        </div>
        <p>情形二：数组形式绑定</p>
        <div :class="[class1, class2]">盒子</div>
        <p>情形三：数组和对象混合模式</p>
        <div :class="[class3, {box1: isBox1, box2: isBox2}]">盒子</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    url: "https://www.baidu.com/",
                    isBox1: true,
                    isBox2: false,
                    class1: 'box2',
                    class2: 'color_set',
                    class3: 'color_set',
                }
            }
        })
    </script>
    <h3>
        <ol>
            <li>
                v-bind 动态的绑定一个或多个属性，语法：<br>
                v-bind:属性名="值"
            </li>
            <li>
                简写： :属性名="值"
            </li>
        </ol>
    </h3>
</body>
</html>